import { Component, OnInit } from '@angular/core'
import { JsonApiService } from 'app/core/api/json-api.service' //http请求配置引入
import { Router, ActivatedRoute } from '@angular/router' //路由引入
import { config } from '../../shared/smartadmin.config'

declare var Viewer: any
@Component({
  selector: 'sa-sanitation-statistics',
  templateUrl: './sanitation-statistics.component.html'
})
export class SanitationStatisticsComponent implements OnInit {
  tableData = [] //table数据
  totalCount: number = 0 //分页总条数
  curPage: number = 1 //分页当前页
  pageSize: number = 10 //内置的分页每页条数
  searchKey: string = '' //搜索keyword
  startTime_table: string = ''
  endTime_table: string = ''
  selectedCompanyId: string = ''
  selectedCompanyName: string = ''
  carNumber: string = ''
  deviceId: string = ''
  pointName: string = ''
  timeType: string = '1'
  specifyTime = {
    startTime: '',
    endTime: ''
  }
  constructor(private jsonApiService: JsonApiService, private router: Router, private activatedRoute: ActivatedRoute) {
    activatedRoute.queryParams.subscribe(queryParams => {
      this.curPage = queryParams.nowPage || 1
    })
  }

  ngOnInit() {
    // const timeR = common.getRecentDaysDateTime(1)
    // this.specifyTime = {
    //   startTime: timeR.startTime,
    //   endTime: timeR.endTime
    // }
    this.load()
  }

  // 接收子组件传递过来的数据
  getSelectTableTime(time) {
    this.startTime_table = time.startTime
    this.endTime_table = time.endTime
  }
  getSelectCarInfo(val) {
    this.deviceId = val.deviceId
    this.carNumber = val.carNumber
    this.selectedCompanyId = val.companyId
    this.selectedCompanyName = val.companyName
  }

  //公司选中回调
  companySelected(data) {
    this.selectedCompanyId = data.companyId
    this.selectedCompanyName = data.companyName
    this.deviceId = data.deviceId
    this.carNumber = data.carNumber
  }

  //表格搜索
  table_search() {
    this.curPage = 1
    this.searchKey = common.stringTrim(this.searchKey)
    this.load()
  }
  //刷新
  refresh() {
    this.load()
  }
  //初始化加载list数据
  load() {
    const data = {
      pageSize: this.pageSize,
      nowPage: this.curPage,
      parameters: {
        companyId: this.selectedCompanyId,
        deviceId: this.deviceId,
        pointName: this.pointName,
        startTime: this.startTime_table,
        endTime: this.endTime_table,
        searchKey: this.searchKey,
        timeType: this.timeType
      }
    }
    const reqData = 'gridPager=' + JSON.stringify(data)
    this.jsonApiService.http('nanZhaoHuanWei/queryNanZhaoHuanWeiRfidPage.html', reqData).subscribe(data => {
      const exhibitDatas = data.exhibitDatas || []
      this.tableData = exhibitDatas.map(item => {
        item.weight = parseFloat(item.weight).toFixed(2)
        return item
      })
      this.totalCount = data.recordCount
    })
  }
  //分页回调
  paginate(e) {
    this.curPage = e.page + 1
    this.pageSize = e.rows
    this.load()
  }

  //导出报表
  exportData() {
    const params = {
      isExport: true,
			"parameters": {
				companyId: this.selectedCompanyId,
        deviceId: this.deviceId,
        pointName: this.pointName,
        startTime: this.startTime_table,
        endTime: this.endTime_table,
        searchKey: this.searchKey,
        timeType: this.timeType
			}
		};
		const timeCheck = common.correctTime(params.parameters, ['timeType','export'])
		if (!timeCheck.status) {
			this.jsonApiService.message(timeCheck.message);
			return;
		}
		common.exprotDataFile(params, 'gridPager', config.BaseURL + 'nanZhaoHuanWei/queryNanZhaoHuanWeiRfidPage.html')
  }

  // ---------------------------------- 导入部分 -------------------------------- //
  fileUp: string = ''
  fileToUpload: File = null //上传文件回调参数
  // 显示数据管理弹框
  showImportModal(modal) {
    // 清空选择的文件
    modal.show()
    this.fileToUpload = null
  }
  // 关闭数据管理弹窗
  cancelUp(modal) {
    modal.hide()
    this.fileToUpload = null
  }
  // 下载模板
  load_module() {
    const elemIF = document.createElement('iframe')
    elemIF.src = config.BaseURL + 'resources/template/河南南召环卫站点导入模板.xlsx'
    elemIF.style.display = 'none'
    document.body.appendChild(elemIF)
  }
  // 清空input type=file输入框的值
  clearFile() {
    this.fileUp = ''
  }
  //文件上传change回调
  fileChange(files: FileList) {
    this.fileToUpload = files.item(0)
    const isEXCEL =
      this.fileToUpload.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
      this.fileToUpload.type === 'application/vnd.ms-excel'
    if (!isEXCEL) {
      this.jsonApiService.message('上传文件只能是 excel格式!')
      this.fileToUpload = null
      return
    }
  }
  //导入submit
  submitData(modal) {
    const postParam = new FormData()
    postParam.append('file', this.fileToUpload)
    if (!this.fileToUpload) {
      this.jsonApiService.message('请上传文件')
      return false
    }
    this.jsonApiService.form_http('nanZhaoHuanWei/uploadRfidAndPoint.html', postParam).subscribe(data => {
      if (data.success) {
        modal.hide()
        this.fileToUpload = null
        this.load()
      }
    })
  }

  // ---------------------------------- 已上传RFID -------------------------------- //
  uploadedRFIDTableData = []
  uploadedRFIDSearchKey = ''
  uploadedRFIDTotalCount = 0
  uploadedRFIDPageSize = 10
  uploadedRFIDCurPage = 1

  // 打开弹框
  showUploadedRFIDModal(modal) {
    modal.show()
    this.uploadedRFIDPageSize = 10
    this.uploadedRFIDCurPage = 1
    this.loadUploadedRFIDTable()
  }
  // 关闭弹框
  uploadedRFIDModalHide(modal) {
    modal.hide()
  }

  // 查询
  handleUploadedRFIDTableSearch() {
    this.uploadedRFIDCurPage = 1
    this.uploadedRFIDSearchKey = common.stringTrim(this.uploadedRFIDSearchKey)
    this.loadUploadedRFIDTable()
  }
  //分页回调
	uploadedRFIDPaginate(e) {
		this.uploadedRFIDCurPage = e.page + 1;
		this.uploadedRFIDPageSize = e.rows;
		this.loadUploadedRFIDTable();
	}
  // 加载表格数据
  loadUploadedRFIDTable() {
    const param = {
      pageSize: this.uploadedRFIDPageSize,
      nowPage: this.uploadedRFIDCurPage,
      parameters: {
        searchKey: this.uploadedRFIDSearchKey
      }
    }
    const reqData = 'gridPager=' + JSON.stringify(param)
    this.jsonApiService.http('nanZhaoHuanWei/queryNanZhaoHuanWeiRfidAndPointPage.html', reqData).subscribe(data => {
      this.uploadedRFIDTableData = data.exhibitDatas
      this.uploadedRFIDTotalCount = data.recordCount
    })
  }

  // ------------------- 查看图片部分 ------------------------ //
  imgList = []
  viewer = null

  viewCapture(row) {
    const data = {
      deviceId: row.deviceId,
      startTime: row.carUploadDate,
      endTime: row.carUploadDate
    }
    let reqStr = ''
    for (let k in data) {
      if (!reqStr) {
        reqStr += k + '=' + data[k]
      } else {
        reqStr += '&' + k + '=' + data[k]
      }
    }
    this.jsonApiService.http_get('nanZhaoHuanWei/queryNanZhaoRubbishPhotoList.html?' + reqStr).subscribe(res => {
      if (res.data && res.data.length) {
        const imgUrlList = res.data.map(item => item.url)
        this.showImg(imgUrlList)
      }else{
        this.jsonApiService.message('暂无图片')
      }
    })
  }

  //显示图片组件
  showImg(imgUrlList) {
    if (this.viewer) {
      this.viewer.destroy()
    }

    const imgsDiv = document.createElement('div')

    for (const imgUrl of imgUrlList) {
      const img = document.createElement('img')
      img.src = imgUrl
      imgsDiv.appendChild(img)
    }

    this.viewer = new Viewer(imgsDiv)
    this.viewer.show()
  }
}
